/*顶部菜单--开始*/
var navLeft = document.querySelector('.nav .nav-left')
var navLeftData = [{
		name:'星痕订餐',
		href:''
	},
	{
		name:'购物车',
		href:''
	},
	{
		name:'订单',
		href:''
	},
	{
		name:'投诉',
		href:''
	},
	{
		name:'客服',
		href:''
	},
	{
		name:'评价',
		href:''
	},
	
]
navLeftData.forEach((e, i) => {
	var a = document.createElement('a')//创建一个元素，'a'表示创建了一个a标签元素
	
	a.href = e.href //设置a标签的跳转地址
	a.innerHTML = e.name //设置a标签的文字,e表示当前Data的值
	var li = document.createElement('li')//创建一个li标签元素	
	li.appendChild(a)//把a标签放进li里
	navLeft.appendChild(li)//把li加到nav-left下
	
})
// 购物车角标
	var buycar = document.querySelector('.nav-left li:nth-child(2)')
	var div = document.createElement('div')
	buycar.appendChild(div)
	buycar.classList.add('buycarFlex')
	div.classList.add('buycarMark')
	// console.log(buycar)
	var mark = document.querySelector('.buycarMark')
	var div2 = document.createElement('div')
	mark.appendChild(div2)
	div2.classList.add('mark')
	
	var span = document.createElement('span')
	div2.appendChild(span)
	
	// 添加点击“加入购物车”点击事件
	var btnPrinary = document.querySelectorAll('.btn-primary')
	var numb = 0
	var buySuccesskp = document.querySelector('#buySuccesskp')
	span.innerHTML = 0
	btnPrinary.forEach((e,i)=>{
		e.onclick=function(){
			span.innerHTML = ++numb
			buySuccesskp.classList.remove('hidden')
		}
		e.onmouseout = function(){
			buySuccesskp.classList.add('hidden')
		}
	})
	// 点击加入购物车后提示加入成功
	
// 扫码部分
document.querySelector('#twoc').onmouseover = function(){
	var twoCode = document.querySelector('.twoCode')
	twoCode.style.display='block'
}
document.querySelector('#twoc').onmouseout = function(){
	var twoCode = document.querySelector('.twoCode')
	twoCode.style.display='none'
}
/*顶部菜单--结束*/
/*—————————————————————————————————————————————————————————*/
/*搜索框点击时展示最近搜索栏，从搜索框和最近栏移除鼠标则取消显示*/
var recentsearch = document.querySelector('#recentSearch')
document.querySelector('.searchKuang').onclick=function(){
	recentsearch.classList.remove('hidden')
}
document.querySelector('.search~#recentSearch').onmouseout=function(){
	recentsearch.classList.add('hidden')
}
// 鼠标移动到轮播图菜单后取消最近搜索栏展示
document.querySelector('.meun').onmouseover=function(){
	recentsearch.classList.add('hidden')
}

/*---------------------------------------------------------*/
/*轮播图--开始*/
/*第一个轮播图*/
var currentIndex = 2;

document.querySelector('#swapper1 .before').onclick = function() {
	var lis = document.querySelectorAll('#swapper1 li')
	--currentIndex
	// console.log(lis[currentIndex])
	if(currentIndex < 0){
		currentIndex= lis.length - 1
	}
	//将所有的li的z-index=0
	lis.forEach((li,i)=>{
		li.style.zIndex = '0'
	})
	//将当前显示的这个元素改为最高
	lis[currentIndex].style.zIndex = '1'
	
	// 以下是设置 点 跟随图片改变长度
	var cycles = document.querySelectorAll('#swapper1 .cycle')
	cycles.forEach((a,i) => {
		a.style.width = '15px'
	})
	//将当前显示的这个元素的width=50px
	cycles[currentIndex].style.width = '50px'
}
// 轮播图左右点击切换按钮的展示与取消展示
var befores = document.querySelectorAll('.before')
var afters = document.querySelectorAll('.after')
var swappers = document.querySelectorAll('.swapper')
for(let i = 0; i < swappers.length; i ++){
	swappers[i].onmouseover = function(){
		befores[i].classList.remove('hidden')
		afters[i].classList.remove('hidden')
	}
	swappers[i].onmouseout = function(){
		befores[i].classList.add('hidden')
		afters[i].classList.add('hidden')
	}
}

document.querySelector('#swapper1 .after').onclick = function() {
	var lis = document.querySelectorAll('#swapper1 li')
		++currentIndex
	if(currentIndex > lis.length -1) {
		currentIndex = '0'
	}
	lis.forEach((li,i)=>{
		li.style.zIndex = '0'
	})
	//将所有的li的z-index=0
	lis[currentIndex].style.zIndex = '1'
	
	var cycles = document.querySelectorAll('#swapper1 .cycle')
	cycles.forEach((a,i) => {
		a.style.width = '15px'
	})
	//将当前显示的这个元素的width=50px
	cycles[currentIndex].style.width = '50px'
}
// 中下方圆顶点
var cycles = document.querySelectorAll('#swapper1 .cycle')
cycles.forEach((cycle,i) => {
	cycle.onclick = function() {
		var lis = document.querySelectorAll('#swapper1 li')
		//将所有的li的z-index=0
		lis.forEach((li,i) => {
			li.style.zIndex = '0'
		})
		//将当前显示的元素改为最高
		lis[i].style.zIndex = '1'
		//将所有的cycle的width=15px,即为保持原样
		cycles.forEach((a,i) => {
			a.style.width = '15px'
		})
		//将当前显示的这个元素的width=30px
		cycle.style.width = '50px'
	}
})
/*实现第一个轮播图的自动切换点击后一张图*/
var after = document.querySelector('.after')
  // 鼠标进入轮播图后添加鼠标进入事件，使用clearInterval函数来停止setInterval函数的执行
swapper1.addEventListener('mouseenter',function(){
	clearInterval(timer)
	timer = null
})
  // 鼠标离开后添加鼠标离开事件，恢复setInterval函数
swapper1.addEventListener('mouseleave',function(){
	timer = setInterval(function(){
		after.click()
	},2000)
})
  // 页面加载完成后，每隔2s自动点击切换下一张
var timer = setInterval(function(){
		after.click()
	},2000)

/*第二个轮播图*/
/*实现图片定时自动切换*/
var currentIndex = 2;
// document.querySelector('#swapper2').onload = setInterval(function() {
// 	var lis = document.querySelectorAll('#swapper2 li')
// 	--currentIndex
// 	// console.log(lis[currentIndex])
// 	if(currentIndex < 0){
// 		currentIndex= lis.length - 1
// 	}
// 	//将所有的li的z-index=0
// 	lis.forEach((li,i)=>{
// 		li.style.zIndex = '0'
// 	})
// 	//将当前显示的这个元素改为最高
// 	lis[currentIndex].style.zIndex = '1'
	
// 	// 以下是设置 点 跟随图片改变长度
// 	var cycles = document.querySelectorAll('#swapper2 .cycle')
// 	cycles.forEach((a,i) => {
// 		a.style.width = '15px'
// 	})
// 	//将当前显示的这个元素的width=50px
// 	cycles[currentIndex].style.width = '50px'
// },1000)
/*实现第二个轮播图的自动切换点击前一张图*/
var before2 = document.querySelector('#foretow')
swapper1.addEventListener('mouseenter',function(){
	clearInterval(timer)
	timer = null
})
swapper1.addEventListener('mouseleave',function(){
	timer = setInterval(function(){
		before2.click()
	},2000)
})
var timer = setInterval(function(){
		before2.click()
	},2000)

/*实现图片切换按钮点击切换*/
var currentIndex = 2;
document.querySelector('#swapper2 .before').onclick = function() {
	var lis = document.querySelectorAll('#swapper2 li')
	--currentIndex
	// console.log(lis[currentIndex])
	if(currentIndex < 0){
		currentIndex= lis.length - 1
	}
	//将所有的li的z-index=0
	lis.forEach((li,i)=>{
		li.style.zIndex = '0'
	})
	//将当前显示的这个元素改为最高
	lis[currentIndex].style.zIndex = '1'
	
	// 以下是设置 点 跟随图片改变长度
	var cycles = document.querySelectorAll('#swapper2 .cycle')
	cycles.forEach((a,i) => {
		a.style.width = '15px'
	})
	//将当前显示的这个元素的width=50px
	cycles[currentIndex].style.width = '50px'
}

document.querySelector('#swapper2 .after').onclick = function() {
	var lis = document.querySelectorAll('#swapper2 li')
		++currentIndex
	if(currentIndex > lis.length -1) {
		currentIndex = '0'
	}
	lis.forEach((li,i)=>{
		li.style.zIndex = '0'
	})
	//将所有的li的z-index=0
	lis[currentIndex].style.zIndex = '1'
	
	var cycles = document.querySelectorAll('#swapper2 .cycle')
	cycles.forEach((a,i) => {
		a.style.width = '15px'
	})
	//将当前显示的这个元素的width=50px
	cycles[currentIndex].style.width = '50px'
}
// 中下方圆顶点
var cycles = document.querySelectorAll('#swapper2 .cycle')
cycles.forEach((cycle,i) => {
	cycle.onclick = function() {
		var lis = document.querySelectorAll('#swapper2 li')
		//将所有的li的z-index=0
		lis.forEach((li,i) => {
			li.style.zIndex = '0'
		})
		//将当前显示的元素改为最高
		lis[i].style.zIndex = '1'
		//将所有的cycle的width=15px,即为保持原样
		cycles.forEach((a,i) => {
			a.style.width = '15px'
		})
		//将当前显示的这个元素的width=30px
		cycle.style.width = '50px'
	}
})

/*第三个轮播图*/
/*实现图片定时自动切换*/
var currentIndex = 2;
document.querySelector('#swapper3').onload = setInterval(function() {
	var lis = document.querySelectorAll('#swapper3 li')
	--currentIndex
	// console.log(lis[currentIndex])
	if(currentIndex < 0){
		currentIndex= lis.length - 1
	}
	//将所有的li的z-index=0
	lis.forEach((li,i)=>{
		li.style.zIndex = '0'
	})
	//将当前显示的这个元素改为最高
	lis[currentIndex].style.zIndex = '1'
	
	// 以下是设置 点 跟随图片改变长度
	var cycles = document.querySelectorAll('#swapper3 .cycle')
	cycles.forEach((a,i) => {
		a.style.width = '15px'
	})
	//将当前显示的这个元素的width=50px
	cycles[currentIndex].style.width = '50px'
},1000)
/*实现图片切换按钮点击切换*/
var currentIndex = 2;
document.querySelector('#swapper3 .before').onclick = function() {
	var lis = document.querySelectorAll('#swapper3 li')
	--currentIndex
	// console.log(lis[currentIndex])
	if(currentIndex < 0){
		currentIndex= lis.length - 1
	}
	//将所有的li的z-index=0
	lis.forEach((li,i)=>{
		li.style.zIndex = '0'
	})
	//将当前显示的这个元素改为最高
	lis[currentIndex].style.zIndex = '1'
	
	// 以下是设置 点 跟随图片改变长度
	var cycles = document.querySelectorAll('#swapper3 .cycle')
	cycles.forEach((a,i) => {
		a.style.width = '15px'
	})
	//将当前显示的这个元素的width=50px
	cycles[currentIndex].style.width = '50px'
}

document.querySelector('#swapper3 .after').onclick = function() {
	var lis = document.querySelectorAll('#swapper3 li')
		++currentIndex
	if(currentIndex > lis.length -1) {
		currentIndex = '0'
	}
	lis.forEach((li,i)=>{
		li.style.zIndex = '0'
	})
	//将所有的li的z-index=0
	lis[currentIndex].style.zIndex = '1'
	
	var cycles = document.querySelectorAll('#swapper3 .cycle')
	cycles.forEach((a,i) => {
		a.style.width = '15px'
	})
	//将当前显示的这个元素的width=50px
	cycles[currentIndex].style.width = '50px'
}
// 中下方圆顶点
var cycles = document.querySelectorAll('#swapper3 .cycle')
cycles.forEach((cycle,i) => {
	cycle.onclick = function() {
		var lis = document.querySelectorAll('#swapper3 li')
		//将所有的li的z-index=0
		lis.forEach((li,i) => {
			li.style.zIndex = '0'
		})
		//将当前显示的元素改为最高
		lis[i].style.zIndex = '1'
		//将所有的cycle的width=15px,即为保持原样
		cycles.forEach((a,i) => {
			a.style.width = '15px'
		})
		//将当前显示的这个元素的width=30px
		cycle.style.width = '50px'
	}
})
/*轮播图--结束*/
/*---------------------------------------------------------*/
